<template>
<div>
    <if-header></if-header>
    <van-search
            v-model="value"
            shape="round"
            background="#fff"
            placeholder="输入关键字，查能不能做"
            />
    <van-tabs color="rgb(136,223,171)" line-width=".15rem" line-height=".06rem" title-active-color="#000" @click="clickHander">
        <van-tab v-for="(item, index) in list.cate" :title="item.title" :key="index" class="slide" :to="'/doSearch/'+item.cid">
            <div class="max">
                <div reg="div" class="outbig" v-for="(value, index) in list.list" :key="index" >
                    <img :src="value.image_url" alt="" class="img">
                    <span class="right">
                        <p class="title">{{value.title}}</p>
                        <div v-for="(it,index) in value.conclusion" :key="index" class="rightitem">
                            <div v-if="index=='2'">
                                <img src="http://static.epetbar.com/epet_wap_img/opgc/o_false.png" alt="">{{it}}
                            </div>
                            <div v-if="index=='3'">
                                <img src="http://static.epetbar.com/epet_wap_img/opgc/o_watch.png" alt="">{{it}}
                            </div>
                            <div v-if="index=='1'">
                                <img src="http://static.epetbar.com/epet_wap_img/opgc/o_right.png" alt="">{{it}}
                            </div>
                        </div>
                    </span>
                </div>
            </div>
        </van-tab>
    </van-tabs>
    
</div>
</template>

<script>
import Vue from 'vue';
import ifHeader from '../header'
import { Search, Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data() {
        return {
            list:[],
            list1:[],
            cid:this.$router.history.current.params.cid,
            value : ''
        }
    },
    components: {
        'if-header' : ifHeader,
    },
    async mounted() {     
        let result = await this.$http.get({
            url:'/content/Tools/Do.html',
            params:{
                do: "list",
                cid: window.location.href.split('/').pop(),
                word:'',
                page: 1,
                pettype: "dog",
                system: "wap",
                isWeb: 1,
                version: 517,
                distinct_id:"1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca",
            }
        })
        this.list = result.data
    },
    methods:{
        clickHander(name,title) {
            this.$http.get({
                url:'/content/Tools/Do.html',
                params:{
                    do: "list",
                    cid: 15420+name,
                    word:'',
                    page: 1,
                    pettype: "dog",
                    system: "wap",
                    isWeb: 1,
                    version: 517,
                    distinct_id:"1768548a12f68-06d1a541b973ac-c791039-1327104-1768548a1313ca",
                }
            }).then(res=>{
                this.list = res.data
            })
        },
    }
}
</script>

<style lang="stylus" scoped>
/deep/.van-tab__text
        font-size .12rem
/deep/.van-tab--active
        span 
            font-size .16rem
.max
    height 5rem
    overflow-y scroll
    .outbig
        padding .1rem
        width 100%
        display flex
        .img
            width .9rem
            height .9rem
            border-radius .1rem
            vertical-align middle
        .right
            flex 1
            .title
                font-size .15rem
                font-weight 700
                margin-left .1rem
            .rightitem
                margin-left .1rem
                font-size .12rem
                div
                    margin-top .05rem
                    img 
                        width .14rem
                        height .14rem
                        margin-right .05rem
            
    
</style>